<html>
  <head>
    <title>高效开发技巧</title>
  </head>
  <body>
    <script>
      /*
          高效开发技巧


          一、概述
          
                为了提升开发效率，HBuilderX将 uni-app 常用代码封装成了 u 开头的代码块，如在 template 标签内输入 ulist 回车，

                会自动生成如下代码：

                        <uni-list>
                            <uni-list-item title="" note=""></uni-list-item>
                            <uni-list-item title="" note=""></uni-list-item>
                        </uni-list>

                ★、注意：  需确保 uni-list 组件以保存在项目的 components 目录下。比较简单的方式，是新建项目时，选uni-app项目模板，

                    在里面即可随便敲所有 "u" 开头的代码块。

                    如果你的项目不是 uni-ui 项目模板，那么你需要去插件市场手动把 uni ui组件下载到工程里。


                 代码块分为"Tag代码块"、"JS代码块"，如在 script 标签内输入 uShowToast 回车，
                 
                 会自动生成如下代码：

                        uni.showToast({
                          title:'',
                          mask:false,
                          duration:1500
                        });
      
                  uni-app 已经支持代码块见下方列表：
                        
      */

      /*
           二、Tag代码块
           
                    ①、uButton
                    ②、uCheckbox
                    ③、uGrid: 宫格，需要引用 uni ui
                    ④、uList: 列表，需引用 uni ui
                    ⑤、uListMedia
                    ⑥、uRadio
                    ⑦、uSwiper
                    ....

                    几乎各种组件，不管是内置组件还是 uni-ui 的组件，均已封装为代码块；

                    使用HBuilderX 打开 uni-app 项目中的 .vue 文件，在 template 区域敲 "u" ，代码助手会提示所有可见代码块列表。

                    你也可以在HBuilderX 中 "菜单"---"工具"--"代码块设置"--"vue代码块"的左侧列表查阅所有可见代码块列表。

                    除组件外，其他常用代码块包括：

                        ①、viewfor: 生成一段带有 v-for 循环结构的视图代码块

                        ②、vbase:  生成一段基本的 vue 代码结构
      */

      /*
            三、JS代码块
                        
                  1、uni api 代码块：

                            ①、uRequest

                            ②、uGetLoaction

                            ③、uShowToast

                            ④、uShowLoading

                            ⑤、uHideLoading

                            ⑥、uShowModal

                            ⑦、uShowActionSheet

                            ⑧、uNavigateTo

                            ⑨、uNavigateBack

                            ⑩、uRedirectTo

                            ⑪、uStartPullDownRefresh

                            ⑫、uStopPullDownRefresh

                            ⑬、uLogin

                            ⑭、uShare

                            ⑮、uPay


                            几乎各种常用 js  api ，均已封装为代码块，在HBuilderX的js代码中敲u,代码助手会提示所有可见列表。

                            也刻在HBuilderX中的 "菜单"---"工具"---"代码块设置"---"js代码块"的左侧列表查阅所有。

                
              2、vue  js代码块

                            ①、vImport : 导入文件

                            ②、ed:  export default

                            ③、vData： 输出 data(){return{}}

                            ④、vMethods:  输出  methods:{}

                            ⑤、vComponents: 输出  components:{}


              3、其他常用js 代码块

                            ①、iff: 简单 if

                            ②、forr:  for循环结构体

                            ③、fori：  for循环结构体并包含i

                            ④、funn：  函数

                            ⑤、funa:   匿名函数

                            ⑥、rt：    return true

                            ⑦、clog:  输出：  "console.log()"

                            ⑧、clogvar:  增强的日志输出，可同时把变量的名字打印出来

                            ⑨、varcw:  输出： "var  currentWebview = this.$scope.page.$getApWebview()"

                            ⑩、ifios:  ios的平台判断

                            ⑪、ifAndroid:  Android的平台判断
      */

      /*
            四、自定义代码块

                    预置代码块不满足需求的话，可以自定义代码块，

                    教程参考：  https://ask.dcloud.net.cn/article/35924
      */
    </script>
  </body>
</html>